<!DOCTYPE html>
<title>IntersectionObserver observing elements with css zoom</title>
<link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org">
<link rel="author" title="Google" href="http://www.google.com/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/intersection-observer-test-utils.js"></script>
  <head>
    <style>
      div {
        width: 64px;
        height: 64px;
        background-color: blue
      }
      div.a {
        zoom: 1.0;
        width: 512px;
        height: 512px;
      }

      div.b {
        zoom: 4.0;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="a" id="ToBeRemoved">
      <div class="b" id="target"></div>
    </div>
    <script>
      const viewportWidth = document.documentElement.clientWidth;
      const viewportHeight = document.documentElement.clientHeight;
      setup(() => {
        window.entries = [];
        window.target = document.getElementById("target");
        window.targetRect = target.getBoundingClientRect();
      });
      runTestCycle(function() {
        assert_true(!!target, "target exists");
        const observer = new IntersectionObserver(function(changes) {
          entries = entries.concat(changes);
        });
        observer.observe(target);
        entries = entries.concat(observer.takeRecords());
        assert_equals(entries.length, 0, "No initial notifications");
        runTestCycle(validateIntersectionRect, "Validate intersection rect");
      });
      function validateIntersectionRect() {
        // The numbers in brackets are target client rect; intersection rect;
        // and root bounds.
        checkLastEntry(entries, 0, [
          // the 8 pixels comes from the html body padding.
          8, 8 + 256, 8, 8 + 256,
          8, 8 + 256, 8, 8 + 256,
          0, viewportWidth, 0, viewportHeight,
          true,
        ]);
      }
    </script>
  </body>
